<template>
	<!-- 商品外边框 -->
	<view class="j-goods">
		<!-- 商品图片 -->
		<view class="j-goods-image">
			<u-lazy-load :image="goods.imageFirst" :height="453" img-mode="aspectFill"></u-lazy-load>
			<!-- <image :src="goods.imageFirst" mode="aspectFill"></image> -->
		</view>
		<!-- 商品标题 -->
		<view class="j-goods-title">{{goods.goodsName}}</view>
		<!-- 商品价格 -->
		<view class="j-goods-price">
			<view class="j-goods-price-selling">
				<text class="j-goods-price-sign">￥</text>
				<text class="j-goods-price-">{{goods.price}}</text>
			</view>
			<view class="j-goods-price-market">￥{{goods.purchasePrice}}</view>
		</view>
		<!-- 知豆 -->
		<view class="j-goods-integral">
			<!-- <view class="j-goods-i-box">
				<view class="j-goods-i-title">赠</view>
				<view class="j-goods-i-value">知豆{{goods.integral}}</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default{
		props:['goods'],
		data() {
			return {
			}
		},
	}
</script>

<style scoped lang="scss">
.j-goods {
	max-width: 340rpx;
	min-width: 340rpx;
	display: flex;
	overflow: auto;
	flex-direction: column;
	background-color: #ffffff;
	border-radius: 14rpx;
	overflow: hidden;
	padding-bottom: 5rpx;

	.j-goods-image {
		border-radius: 14rpx 14rpx 0 0;
		overflow: hidden;
		width: 340rpx;
		height: 453rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.j-goods-title {
		font-size: 26rpx;
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.j-goods-price {
		display: flex;
		align-items: flex-end;

		.j-goods-price-selling {
			color: red;
			padding-left: 10rpx;
			padding-right: 10rpx;
			font-size: 30rpx;

			.j-goods-price-sign {
				// font-size: 22rpx;
			}
		}

		.j-goods-price-market {
			color: #a6a6a6;
			font-size: 22rpx;
			text-decoration: line-through;
		}
	}

	.j-goods-integral {
		padding: 10rpx;
		display: flex;

		.j-goods-i-box {
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, 1);
			border: 1rpx solid rgba(254, 166, 2, 1);
			border-radius: 5rpx;
			font-size: 24rpx;

			.j-goods-i-title {
				color: #ffffff;
				display: flex;
				padding: 0 10rpx;
				align-items: center;
				justify-content: center;
				background-color: #fea602;
			}

			.j-goods-i-value {
				color: #fea602;
				padding: 0 10rpx;
			}
		}
	}
}
</style>
